<template>
  <div class="dialog">
    <el-dialog
      :title="dialog.title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      :visible.sync="dialog.show"
    >
      <el-form ref="ExCodeForm" :model="ExCodeForm" label-width="150px">
        <el-form-item label="兑换码：">
          <el-input
            v-model="ExCodeForm.code"
            placeholder="请输入邮件描述"
            :disabled="dialog.enable"
          ></el-input>
        </el-form-item>
        <el-form-item label="兑换码描述：">
          <el-input
            v-model="ExCodeForm.describe"
            placeholder="请输入邮件描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间:">
          <el-date-picker
            v-model="ExCodeForm.startTime"
            type="datetime"
            value-format="timestamp"
            placeholder="请选择开始时间"
          ></el-date-picker>
          <span style="margin-left: 15px">结束时间：</span>
          <el-date-picker
            v-model="ExCodeForm.endTime"
            type="datetime"
            value-format="timestamp"
            placeholder="请选择结束时间"
          ></el-date-picker>
        </el-form-item>
         <el-form-item label="可兑换用户数：">
          <el-input
            v-model="ExCodeForm.userLimit"
            placeholder="请输入可兑换用户数"
          ></el-input>
        </el-form-item>
        <div v-for="(item, index) in ExCodeForm.awards" :key="index">
          <template>
            <el-form-item label="物品id：">
              <el-input
                style="width: 35%"
                placeholder="物品id"
                v-model.number="item.goodsId"
              ></el-input>
              <span style="margin-left: 20px; padding: 10px; font-size: 15px"
              >共</span>
              <el-input
                style="width: 35%"
                v-model.number="item.goodsNum"
                controls-position="right"
              ></el-input>
              <span style="padding: 10px; font-size: 15px">个</span>
              <el-button 
                class="el-icon-delete" 
                :disabled="dialog.mailSearch" 
                style="color:red;" 
                @click="deleteItem(index)"
              ></el-button>
            </el-form-item>
          </template>
        </div>
        <el-button
          type="primary"
          class="btn"
          @click="add"
        >添加物品id和数量</el-button>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleclose()">取 消</el-button>
        <el-button
          type="primary"
          @click="handleAddEdit()"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "ExCodeDialog",
  // 获取父亲传过来的值
  props: {
    dialog: {
      type: Object,
      default: () => {},
    },
    ExCodeForm: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    add() {
      this.ExCodeForm.awards.push({goodsId:"",goodsNum:""});
    },
    deleteItem(index){
       this.ExCodeForm.awards.splice(index, 1)
    },
    handleclose() {
      this.dialog.show=false;
    },
    handleAddEdit() {
      var awardsArr=[]
      this.ExCodeForm.awards.forEach(item=>{
        if(item.goodsId===""&&item.goodsNum===""){
          return;
        }else{
          awardsArr.push(item)
        }
      })
      if(this.ExCodeForm.code===""||this.ExCodeForm.code==undefined){
        this.$message({type:"warning",message:"兑换码不能为空"});
        return;
      }else if(this.ExCodeForm.startTime===""||this.ExCodeForm.startTime==undefined){
        this.$message({type:"warning",message:"请输入开始时间"});
        return;
      }else if(this.ExCodeForm.endTime===""||this.ExCodeForm.endTime==undefined){
        this.$message({type:"warning",message:"请输入结束时间"});
        return;
      }else if(this.ExCodeForm.userLimit===""||this.ExCodeForm.userLimit==undefined){
        this.$message({type:"warning",message:"请输入可兑换用户数"});
        return;
      }else{
        let obj = {
            describe: this.ExCodeForm.describe,
            code: this.ExCodeForm.code,
            startTime: this.ExCodeForm.startTime,
            endTime: this.ExCodeForm.endTime,
            userLimit: this.ExCodeForm.userLimit,
            describe: this.ExCodeForm.describe,
            awards: awardsArr,
        };
        this.dialog.show = false;
        this.$emit("update", obj);
      }
    },
  },
};
</script>
<style scoped>
.btn {
  padding: 10px;
  margin-left: 45%;
}
</style>